<template>
  <div class="box">
    <h1>scss</h1>
    <span>请给我hover的样式</span>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
$main: #87ceeb;
$black: #333;
.box {
  background: $main;
  h1 {
    color: $black;
  }
  // span {
  //   border: 1px solid $black;
  //   cursor: pointer;
  // }
  // span:hover {
  //   color: red;
  // }
  span {
    border: 1px solid $black;
    cursor: pointer;
    &:hover {
      color: red;
    }
  }
}
</style>